import Graphics from './Graphics';
import Sprite from './Sprite';
import Stage from './Stage';
let uid = 0;

class Scenes {
  id: number;
  _ctx: CanvasRenderingContext2D;
  graphics: Graphics;
  parent: Stage;
  canvas: HTMLCanvasElement;
  children: Array<Sprite>;

  constructor(parent?: Stage) {
    this.id = uid++;
    this.parent = parent;
    this.children = [];
    this.canvas = document.createElement('canvas');
    this.canvas.width = 500;
    this.canvas.height = 500;
    this._ctx = this.canvas.getContext('2d');
    this.graphics = new Graphics(this._ctx);
  }
  start() {
    this.render();
  }

  update() {
    this.render();
  }
  render() {
    const {
      source = null,
      x,
      y,
      width,
      height,
    } = this._scenes_background || {};

    source && this.graphics.drawImage(source, x, y, width, height);
    this.children.forEach((sprite) => {
      sprite.render();
    });
    this.parent.ctx.clearRect(
      0,
      0,
      this.parent.canvas.width,
      this.parent.canvas.height
    );
    this.parent.ctx.drawImage(
      this.canvas,
      0,
      0,
      this.parent.canvas.width,
      this.parent.canvas.height
    );
  }
}

export default Scenes;
